<template>
    <div>
        <el-form
                ref="dataForm"
                status-icon
                :model="form"
                :rules="rules"
                label-width="0px"
        >
            <!--基本信息start-->
            <template>
                <el-descriptions
                        :column="3"
                        border
                        class="margin-top"
                >
                    <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 20%">
                        <template slot="label"> 机构名称</template>
                        <el-form-item prop="institution_id">
                            <el-select
                                    clearable
                                    filterable
                                    v-model="form.institution_id"
                                    placeholder="请选择机构"
                                    style="width: 100%"
                            >
                                <el-option
                                        v-for="item in institutionList"
                                        :key="item.id"
                                        :label="item.institution_name"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label"> 项目角色</template>
                        <el-form-item prop="project_role">
                            <el-select placeholder="项目角色" v-model="form.project_role" style="width:100%">
                                <el-option
                                        v-for="item in projectRoleList"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label"> 姓名</template>
                        <el-form-item prop="name">
                            <el-input
                                    v-model="form.name"
                                    placeholder="请输入姓名"
                                    clearable
                            />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label"> 性别</template>
                        <el-form-item prop="sex">
                            <el-select placeholder="请选择性别" v-model="form.sex" style="width:100%">
                                <el-option
                                        v-for="item in sexList"
                                        :key='item.name'
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>


                    <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 20%">
                        <template slot="label"> 所属部门</template>
                        <el-form-item prop="department">
                            <el-select
                                    clearable
                                    filterable
                                    v-model="form.department"
                                    placeholder="请输入所属部门"
                                    style="width: 100%"
                            >
                                <el-option
                                        v-for="item in departmentList"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>


                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 20%">
                        <template slot="label"> 专业</template>
                        <el-form-item prop="major">


                            <el-select placeholder="专业" v-model="form.major" style="width:100%">
                                <el-option
                                        v-for="item in majorList"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>


                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label"> 职务</template>
                        <el-form-item prop="duties">
                            <el-input
                                    v-model="form.duties"
                                    placeholder="请输入职务"
                                    clearable
                            />
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label"> 职称</template>
                        <el-form-item prop="title_call">
                            <el-input
                                    v-model="form.title_call"
                                    placeholder="请输入职称"
                                    clearable
                            />
                        </el-form-item>
                    </el-descriptions-item>


                    <el-descriptions-item>
                        <template slot="label"> 联系电话</template>
                        <el-form-item prop="phone">
                            <el-input
                                    v-model="form.phone"
                                    placeholder="请输入联系电话"
                                    clearable
                            />
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label"> 邮箱</template>
                        <el-form-item prop="email_address">
                            <el-input
                                    v-model="form.email_address"
                                    placeholder="请输入邮箱地址"
                            />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label"> 邮政编码</template>
                        <el-form-item prop="zipcode">
                            <el-input
                                    v-model="form.zipcode"
                                    placeholder="请输入邮政编码"
                            />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label"> 邮寄地址</template>
                        <el-form-item prop="address">
                            <el-input
                                    v-model="form.address"
                                    placeholder="请输入邮寄地址"
                            />
                        </el-form-item>
                    </el-descriptions-item>

                    <!--                    <el-descriptions-item>-->
                    <!--                        <template slot="label"> 保密协议</template>-->
                    <!--                        <el-upload-->
                    <!--                                class="avatar-uploader"-->
                    <!--                                :action="uploadFileUrl"-->
                    <!--                                :headers="uploadHeader"-->
                    <!--                                :show-file-list="false"-->
                    <!--                                :on-success="handleAvatarSuccess"-->
                    <!--                        >-->
                    <!--                            <img v-if="form.face" :src="form.face" class="avatar"/>-->
                    <!--                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                    <!--                        </el-upload>-->
                    <!--                    </el-descriptions-item>-->
                </el-descriptions>
            </template>

            <template>
                <div>
                    <h3>账号信息</h3>
                    <el-divider></el-divider>
                </div>
            </template>
            <template>
                <el-descriptions
                        :column="3"
                        border
                        class="margin-top"
                >
                    <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 20%">
                        <template slot="label"> 登录账号</template>
                        <el-form-item prop="user_name">
                            <el-input
                                    v-model="form.user_name"
                                    placeholder="请输入登录账号"
                            />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 20%">
                        <template slot="label"> 登录密码</template>
                        <el-form-item prop="password">
                            <el-input
                                    type="password"
                                    show-password
                                    v-model="form.password"
                                    placeholder="请输入登录密码"
                            />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 20%">
                        <template slot="label"> 请选择权限</template>
                        <el-form-item prop="role_id">
                            <el-select
                                    v-model="form.role_id"
                                    placeholder="请选择权限"
                                    style="width: 100%"
                                    multiple
                            >
                                <el-option
                                        v-for="item in rolesList"
                                        :key="item.role_id"
                                        :label="item.role_name"
                                        :value="item.role_id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label"> 状态</template>
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1">正常</el-radio>
                            <el-radio :label="0">停用</el-radio>
                        </el-radio-group>
                    </el-descriptions-item>
                </el-descriptions>
            </template>

            <div style="margin: 20px 20px">
                <div class="dialog-footer" slot="footer">
                    <el-button @click="handleDialogVisible(false)" size="small">取 消</el-button>
                    <el-button @click="!form.uid ? create() : update() " type="primary">确 定
                    </el-button>
                </div>
            </div>
        </el-form>
        <!--基本信息end-->
        </el-form>
    </div>
</template>

<script>
    import {createMember, updateMember} from "@/api/member/member";
    import {allInstitution} from "@/api/institution/institution";
    import {selectRole} from "@/api/system/role";

    export default {
        props: ['rowData', 'dialogStatus'],
        components: {},
        data() {
            return {
                form: {
                    uid: "",
                    institution_id: "",
                    user_name: "",
                    password: "",
                    name: "",
                    sex: "",
                    phone: "",
                    department: "",
                    major: "",
                    duties: "",
                    title_call: "",
                    email_address: "",
                    zipcode: "",
                    address: "",
                    project_role: "",
                    agreement: "",
                    supervise: "",
                    status: 1,
                    login_num: "",
                    role_id: [],
                },
                rules: {
                    institution_id: [{
                        required: true,
                        message: "机构不能为空",
                        trigger: "blur"
                    }],
                    project_role: [{
                        required: true,
                        message: "项目角色不能为空",
                        trigger: "blur"
                    }],
                    name: [{
                        required: true,
                        message: "姓名不能为空",
                        trigger: "blur"
                    }],
                    sex: [{
                        required: true,
                        message: "性别不能为空",
                        trigger: "blur"
                    }],
                    department: [{
                        required: true,
                        message: "部门不能为空",
                        trigger: "blur"
                    }],
                    major: [{
                        required: true,
                        message: "专业不能为空",
                        trigger: "blur"
                    }],
                    duties: [{
                        required: true,
                        message: "职务不能为空",
                        trigger: "blur"
                    }],
                    title_call: [{
                        required: true,
                        message: "职称不能为空",
                        trigger: "blur"
                    }],
                    phone: [{
                        required: true,
                        message: "电话不能为空",
                        trigger: "blur"
                    }],
                    email_address: [{
                        required: true,
                        message: "邮箱不能为空",
                        trigger: "blur"
                    }],
                    zipcode: [{
                        required: true,
                        message: "邮编不能为空",
                        trigger: "blur"
                    }],
                    address: [{
                        required: true,
                        message: "地址不能为空",
                        trigger: "blur"
                    }],
                    supervise: [{
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    }],
                    user_name: [{
                        required: true,
                        message: "账号不能为空",
                        trigger: "blur"
                    }, {min: 5, message: '至少5个字符', trigger: 'blur'}],
                    password: [{
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    }],
                    role_id: [{
                        type: 'array',
                        required: true,
                        message: "至少要选择一个角色",
                        trigger: "change"
                    }],
                    status: [{
                        required: true,
                        message: "请选择状态",
                        trigger: "blur"
                    }],
                },
                createLoading: false,
                updateLoading: false,
                projectRoleList: [
                    {
                        name: "项目管理人员"
                    },
                    {
                        name: "专业技术人员"
                    },
                    {
                        name: "其他"
                    }
                ],
                departmentList: [
                    {
                        name: "消化内科"
                    },
                    {
                        name: "内镜中心"
                    },
                    {
                        name: "病理科"
                    },
                    {
                        name: "信息科"
                    },
                    {
                        name: "医务科"
                    },
                    {
                        name: "流病室"
                    },
                    {
                        name: "慢病科"
                    },
                    {
                        id: 8,
                        name: "其他"
                    }
                ],
                majorList: [
                    {
                        name: "内镜"
                    },
                    {
                        name: "病理"
                    },
                    {
                        name: "护理"
                    },
                    {
                        name: "洗消"
                    },
                    {
                        name: "麻醉"
                    },
                    {
                        name: "流行病"
                    },
                    {
                        name: "信息"
                    }
                ],
                sexList: [
                    {
                        name: "男",
                    },
                    {
                        name: "女",
                    },
                ],
                institutionList: [],
                rolesList: [],
            }
        },
        created() {
            if (this.dialogStatus == 'update') {
                this.form = {...this.rowData}
            }
            this.init();
        },
        methods: {
            init() {
                selectRole().then((res) => {
                    this.rolesList = res.data;
                });
                this.getInstitutionList();
            },
            handleAvatarSuccess(res, file) {
                if (res.code == 200) {
                    if (res.data.url) {
                        this.form.face = res.data.url;

                    } else {
                        this.form.face = res.data;
                    }
                } else {
                    this.$message.error(res.msg);
                }
            },
            getInstitutionList() {
                allInstitution().then((res) => {
                    if (res.code === 200) {
                        this.institutionList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false
                this.$emit('childByDialogVisible', this.dialogVisible, isUpdate)
            },
            //创建
            create() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        this.createLoading = true
                        createMember(this.form).then(response => {
                            this.createLoading = false
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true)
                            }
                        })
                    }
                })
            },
            //修改
            update() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        this.updateLoading = true
                        updateMember(this.form).then(response => {
                            this.updateLoading = false
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true)
                            }
                        })
                    }
                })
            },
            handleConnect() {
                let url = process.env.VUE_APP_CARD_API + 'OpenDevice';
                let options = new Object();
                options.type = "GET";
                options.url = url;
                options.timeout = 5000;
                options.onSuccess = ((data) => {
                    data = JSON.parse(data)
                    this.msgSuccess(data.errorMsg);
                })
                this.ajax(options);
            },
            handleReadCard() {
                let url = process.env.VUE_APP_CARD_API + 'readcard';
                let options = new Object();
                options.type = "GET";
                options.url = url;
                options.timeout = 5000;
                options.onSuccess = ((data) => {
                    data = JSON.parse(data)
                    if (data.resultFlag === 0) {
                        this.form.name = data.partyName;
                        this.form.gender = data.gender;
                        this.form.nation = data.nation;
                        this.form.birthday = data.bornDay;
                        this.form.address = data.certAddress;
                        this.form.sfz = data.certNumber;
                        this.form.issuing_authority = data.certOrg;
                        this.form.expiration_date_start = data.effDate;
                        this.form.expiration_date_end = data.expDate;
                        this.form.photo = data.identityPic;
                    }
                })
                this.ajax(options);
            },
            ajax(options) {
                if (options.type == null) {
                    options.type = "POST";
                }
                if (options.url == null) {
                    options.url = "";
                }
                if (options.timeout == null) {
                    options.timeout = 5000;
                }
                if (options.onComplate == null) {
                    options.onComplate = function () {
                    }
                }
                if (options.onError == null) {
                    options.onError = function () {
                    }
                }
                if (options.onSuccess == null) {
                    options.onSuccess = function () {
                    }
                }
                if (options.data) {
                    options.data = "";
                }
                var xml;
                if (typeof ActiveXObject != 'undefined') {
                    var aVersions = ["Microsoft.XMLHTTP", "Msxml2.XMLHttp.6.0", "Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0"];
                    for (var i = 0; i < aVersions.length; i++) {
                        try {
                            // eslint-disable-next-line no-undef
                            xml = new ActiveXObject(aVersions[i]);
                        } catch (e) {
                            console.log(e)
                        }
                    }
                } else if (typeof XMLHttpRequest != 'undefined') {
                    xml = new XMLHttpRequest();
                }
                xml.open(options.type, options.url, true);
                let timeoutLength = options.timeout;
                let requestDone = false;
                let xhr = this;
                setTimeout(function () {
                    requestDone = true;
                }, timeoutLength);

                xml.onreadystatechange = function () {
                    if (xml.readyState == 4 && !requestDone) {
                        if (xhr.httpSuccess(xml)) {
                            options.onSuccess(xhr.httpData(xml));
                        } else {
                            options.onError();
                        }
                        options.onComplate();
                        xml = null;
                    }
                };
                xml.send();
            },
            httpSuccess(r) {
                try {
                    return !r.status && location.protocol == "file:" || (r.status >= 200 && r.status <= 300) || r.status == 304 || navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined";
                } catch (e) {
                    console.log(e)
                }
                return false;
            },
            httpData(r) {
                var ct = r.getResponseHeader("responseType");
                if (ct) {
                    if (ct == "script") {
                        eval.call(window, 'data');
                    }
                    if (ct == "xml") {
                        return r.responseXML;
                    }
                    if (ct == "json") {
                        return JSON.parse(r.responseText);
                    }
                }
                return r.responseText;
            },
        }
    }
</script>

<style scoped>
    .el-form-item {
        margin: 0;
    }

    /deep/ .el-upload--picture-card {
        width: 100px;
        height: 100px;
    }

    /deep/ .el-upload {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    /deep/ .el-upload-list--picture-card .el-upload-list__item {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    /deep/ .avatar {
        width: 100px;
        height: 100px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>
